<template>
    <div class="brs-progress" :style="{ width: `${size}px`, height: `${size}px` }">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :viewBox="viewBox">
            <path class="path1" :fill="bgColor" :d="d" :stroke="layerColor" :stroke-width="borderWidth" :stroke-dasharray="`${c}, ${c}`"></path>
            <path id="path" :fill="bgColor" :d="d" :stroke="borderColor" :stroke-width="borderWidth" :stroke-dasharray="`${c}, ${c}`" :stroke-dashoffset="strokeDashoffset"></path>
        </svg>
        <div v-if="$slots.default" class="brs-progress-wrapper" :style="{ width: `${size}px`, height: `${size}px`, border: `${borderWidth}px solid rgba(0, 0, 0, 0)` }">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'brs-progress',
    props: {
        size: {
            type: Number,
            default: 300
        }, // 直径（px）
        borderColor: {
            type: String,
            default: '#007ACC'
        }, // 进度条颜色
        layerColor: {
            type: String,
            default: '#FFFFFF'
        }, // 轨道颜色
        bgColor: {
            type: String,
            default: 'none'
        }, // 填充色（圈内的颜色）
        borderWidth: {
            type: Number,
            default: 10
        }, // 进度条宽度
        progress: {
            type: Number,
            default: 0
        }
    },
    computed: {
        // x，y的值
        cx(){
            return (this.size / 2) + (this.borderWidth / 2)
        },
        // 半径
        r(){
            return this.size / 2
        },
        // 周长
        c(){
            return 2 * Math.PI * this.r;
        },
        // 偏移量
        strokeDashoffset(){
            if(this.progress > 100){
                return 0
            }
            if(this.progress < 0){
                return 100 * this.c / 100
            }
            return (100 - this.progress) * this.c / 100;
        },
        // 路径
        d(){
            return `M ${this.cx} ${this.cx} m 0 -${this.r} a ${this.r} ${this.r} 0 1 1 0 ${this.r * 2} a ${this.r} ${this.r} 0 1 1 0 -${this.r * 2}`;
        },
        // svg
        viewBox(){
            return `0 0 ${this.r * 2 + this.borderWidth} ${this.r * 2 + this.borderWidth}`
        }
    }
}
</script>

<style lang="less" scoped>
    .brs-progress{
        overflow: hidden;
        position: relative;
        svg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            .path1{
                z-index: 1;
            }
            #path{
                z-index: 2;
                transition: .2s all;
            }
        }
        .brs-progress-wrapper{
            border-radius: 50%;
            box-sizing: border-box;
            position: relative;
            z-index: 3;
            overflow: hidden;
            & > div{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        }
    }
</style>